<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let lazyLoadClass = '.lazyload-img'
    let imgArr = Array.from(document.querySelectorAll(lazyLoadClass))
    lazyLoadImgs();
    var timer = null;
    window.addEventListener('scroll', function () {
      clearTimeout(timer);
      timer = setTimeout(function () {
        lazyLoadImgs()
      }, 100)
    }, false)

    function lazyLoadImgs() {
      for (let i = 0; i < imgArr.length; i++) {
        if (isInVisibleArea(imgArr[i])) {
          imgArr[i].src = imgArr[i].getAttribute('data-src')
          imgArr.splice(i, 1)
          i--;
        }
      }
    }

    function isInVisibleArea(el) {
      let rect = el.getBoundingClientRect()
      return rect.bottom > 0 && rect.top < window.innerHeight && rect.right > 0 && rect.left < window.innerWidth
    }
    loadProduct();
    window.addEventListener('scroll',loadProduct,false)
    function loadProduct(){
      if(isInVisibleArea(document.getElementById('product'))){
        var script=document.createElement('script')
        setTimeout(function(){
          script.src='js/loadProduct.js'
        },1000)
        document.body.appendChild(script)
        window.removeEventListener('scroll',loadProduct,false)
      }
    }
  </script>
</body>

</html>